<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./02-index.css">
</head>

<body>
    <div class="box">
        <div class="main">
            <img src="./images/1.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="small">
            <ul>
                <li><img src="./images/1.jpg" alt=""></li>
                <li><img src="./images/2.jpg" alt=""></li>
                <li><img src="./images/3.jpg" alt=""></li>
                <li><img src="./images/4.jpg" alt=""></li>
                <li><img src="./images/5.jpg" alt=""></li>
            </ul>
        </div>
        <div class="big">

        </div>
    </div>
</body>

</html>
<script>
    //一、  鼠标经过对应`小图片`，左侧`中等图片`跟随变化
    var s_imgs = document.querySelectorAll('.small img');
    var m_img = document.querySelector('.main img');
    var big = document.querySelector('.big');
    var mask = document.querySelector('.mask')

    // 遍历每个小图片
    for (var i = 0; i < s_imgs.length; i++) {
        // 给每个小图片加鼠标滑过事件
        s_imgs[i].onmouseover = function() {
            this.style.border = '2px solid blue';
            // 获取当前滑过的这张图的路径
            m_img.src = this.src;
        }

        // 给每个小图片加鼠标滑出事件
        s_imgs[i].onmouseout = function() {
            this.style.border = '2px solid transparent'
        }
    }

    // 二、
    // 鼠标经过 / 离开 中盒子，右侧 大盒子显示 / 隐藏
    // 鼠标进入mouseenter  鼠标离开 mouseleave
    m_img.onmouseenter = function() {
        big.style.display = 'block';
        big.style.backgroundImage = `url(${this.src})`
    }

    m_img.onmouseleave = function() {
        big.style.display = 'none';
        mask.style.display = 'none'
    }


    // 黑色遮罩盒子跟随鼠标移动 `  鼠标移动 onmousemove
    m_img.onmousemove = function(e) {
        // 让遮罩层出现
        mask.style.display = 'block';

        // 控制x坐标y坐标 的最小值
        var x = (e.pageX - 100) < 0 ? 0 : (e.pageX - 100);
        var y = (e.pageY - 100) < 0 ? 0 : (e.pageY - 100);
        // 控制x坐标y坐标 的最大值
        x = x > 200 ? 200 : x;
        y = y > 200 ? 200 : y;


        // 给遮罩层坐标赋值
        mask.style.top = y + 'px';
        mask.style.left = x + 'px';

        big.style.backgroundPosition = `${-2*x}px ${-2*y}px`
    }
</script>